<template>
	<div class="admin">
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="用户类别">
				<el-select v-model="searchForm.type" placeholder="用户类别" clearable>
					<el-option label="普通用户" :value="0"/>
					<el-option label="后台管理" :value="1"/>
				</el-select>
			</el-form-item>
			<el-form-item label="用户名">
				<el-input v-model="searchForm.name" placeholder="用户名" clearable></el-input>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="search">查询</el-button>
				<el-button type="success" @click="createDialogVisible=true">添加</el-button>
			</el-form-item>
		</el-form>
		<el-row>
			<el-table :data="tableData" stripe style="width: 100%" v-loading="tableLoading">
				<el-table-column prop="name" label="用户名" width="400" align="center"/>
				<el-table-column label="是否为管理员" align="center">
					<template v-slot="scope"> 
						<el-tag size="small" v-if="scope.row.is_admin==0" type="info">普通用户</el-tag>
						<el-tag size="small" v-if="scope.row.is_admin==1" type="success">后台管理员</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="是否锁定" align="center">
					<template v-slot="scope"> 
						<el-tag size="small" v-if="scope.row.is_lock==0" type="info">正常</el-tag>
						<el-tag size="small" v-if="scope.row.is_lock==1" type="danger">锁定</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="280" align="center">
					<template v-slot="scope">
						<el-button size="mini" @click="open_edit_dialog(scope.row)">改密码</el-button>
						<el-popconfirm title="要锁定该用户吗？" style="margin-left: 10px;" @confirm="remove(scope.row)">
							<el-button slot="reference" size="mini" type="warning">锁 定</el-button>
						</el-popconfirm>
						<el-popconfirm title="确定一定肯定要删除吗？" style="margin-left: 10px;" @confirm="remove(scope.row)">
							<el-button slot="reference" size="mini" type="danger">删 除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center" class="mt-2">
				<el-pagination background layout="total, prev, pager, next, jumper"
					@current-change="page_change" :total="searchForm.total">
				</el-pagination>
			</el-row>
		</el-row>
		
		<!-- 新建窗口 -->
		<el-dialog title="新建账号" width="35%"
			:visible.sync="createDialogVisible">
			<el-form >
				<el-form-item label="账号名称">
					<el-input v-model="createForm.name"></el-input>
				</el-form-item>
				<el-form-item label="登录密码">
					<el-input v-model="createForm.password"></el-input>
				</el-form-item>
				<el-form-item label="账号类型">
					<el-select v-model="createForm.type">
						<el-option label="普通用户" :value="0"></el-option>
						<el-option label="管理员" :value="1"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="createDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">保 存</el-button>
			</span>
		</el-dialog>
		
		<!-- 编辑窗口 -->
		<el-dialog title="提示" width="50%"
			:visible.sync="editDialogVisible">
		  
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible=false">取 消</el-button>
				<el-button type="primary" @click="edit">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { 
		api_user_list, api_user_create
	} from '@/api/user'
	
	export default {
		data() {
			return {
				usertype: null, //0普通用户 1后台管理
				tableLoading: false, 
				tableData: [],
				searchForm: {
					name: '',
					type: null,
					total: 0,
					pageSize: 10,
					pageNum: 1
				},
				createDialogVisible: false,
				createForm: {
					name: '',
					password: '',
					type: 0
				},
				editDialogVisible: false,
				editForm: {
					id: -1,
					password: ''
				}
			}
		},
		mounted() {
			this.load_data();
		},
		methods: {
			search() {
				this.load_data();
			},
			load_data() {
				this.tableLoading = true
				api_user_list(this.searchForm).then(res=>{
					this.tableData = res.data.result
					this.searchForm.total = res.data.total
					this.tableLoading = false
				})
			},
			save() {
				api_user_create(this.createForm).then(res=>{
					this.createDialogVisible = false
					this.load_data();
				})
			},
			lock_toggle() {
				
			},
			page_change(pageNum) {
				this.searchForm.pageNum = pageNum
				this.load_data()
			},
			open_edit_dialog(row) {
			},
			edit() {
			},
			remove(row) {
			}
		}
	}
</script>

<style lang="scss" scoped>
	.admin {
		padding: 10px;
		box-sizing: border-box;
		height: 100%;
		.demo-form-inline {
		}
	}
</style>
